<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { getTimesele, getAlldlist, getEverydlist } from '@/apis/apis.js'
import point from '@/components/point.vue'
const id = ref('')
const dateData = ref([])
const doctorData = ref([])
const activeIndex = ref(-1)
const handleChangeActiveIndex = async (item, index) => {
  activeIndex.value = index
  if (index === -1) {
    const res = await getAlldlist({
      dep_id: id.value
    })
    console.log(res)
    doctorData.value = res.data
  }
  else {
    const res = await getEverydlist({
      dep_id: id.value,
      week: item.week
    })
    console.log(res)
    doctorData.value = res.data
  }
}
const handleToHomepageView = (item, index) => {
  uni.navigateTo({ url: `/pages/doctor/doctor-homepage?id=${item._id}` })
}
onLoad((option) => {
  console.log(option)
  id.value = option.id
})
onMounted(async () => {
  let res = await getTimesele({
    dep_id: id.value
  })
  console.log(res)
  dateData.value = res.data
  res = await getAlldlist({
    dep_id: id.value
  })
  console.log(res)
  doctorData.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="view-header">
      <view class="view-header-left" :class="{ active: activeIndex === -1 }" @click="handleChangeActiveIndex(null, -1)">全部</view>
      <scroll-view class="view-header-right" scroll-x enable-flex>
        <view class="view-header-right-item" :class="{ active: activeIndex === index }" @click="handleChangeActiveIndex(item, index)" v-for="(item, index) in dateData" :key="index">
          <view class="view-header-right-item-date">{{ item.date }}</view>
          <view class="view-header-right-item-week">{{ item.week }}</view>
          <view class="view-header-right-item-flag">{{ item.nu_source === 0 ? '无号' : '可约' }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="view-body">
      <view class="view-body-item" v-for="(item, index) in doctorData" :key="index">
        <view class="view-body-item-left">
          <image class="view-body-item-left-image" :src="item.avatar" mode="aspectFill"></image>
          <view class="view-body-item-left-info">
            <view class="view-body-item-left-name">{{ item.name }}</view>
            <view class="view-body-item-left-level">{{ item.post }}</view>
            <view class="view-body-item-left-describe">{{ item.good_at }}</view>
          </view>
        </view>
        <view class="view-body-item-right" @click="handleToHomepageView(item, index)">预约</view>
      </view>
    </view>
    <point text="当日没有医生排班" v-if="doctorData.length <= 0" />
  </view>
</template>

<style scoped lang="scss">
.view {
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-header {
    display: flex;
    height: 210rpx;
    border-top: 1px solid #f8f8f8;
    .view-header-left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150rpx;
      background-color: #fff;
      border-right: 1px solid #f8f8f8;
      &.active {
        color: blue;
      }
    }
    .view-header-right {
      display: flex;
      width: 600rpx;
      white-space: nowrap;
      .view-header-right-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 30rpx;
        background-color: #fff;
        &.active {
          color: blue;
        }
        .view-header-right-item-week {
          margin: 20rpx 0;
        }
        .view-header-right-item-flag {
          font-size: 28rpx;
        }
      }
    }
  }
  .view-body {
    padding-top: 20rpx;
    .view-body-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background-color: #fff;
      .view-body-item-left {
        display: flex;
        align-items: center;
        .view-body-item-left-image {
          margin-right: 20rpx;
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
        }
        .view-body-item-left-info {
          .view-body-item-left-name {
            font-size: 36rpx;
            font-weight: bold;
          }
          .view-body-item-left-level {
            margin: 20rpx 0;
            color: #ccc;
          }
          .view-body-item-left-describe {
            width: 400rpx;
            color: #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .view-body-item-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120rpx;
        height: 60rpx;
        border: 1px solid #4a6f94;
        border-radius: 30rpx;
        color: #4a6f94;
      }
    }
  }
}
</style>
